<nz-layout>
  <!-- 头 -->
  <nz-header class="header">
    <div class="logo">
      <span class="top">治具製作智能管理系統</span>
    </div>
    <div class="infom">
      <div class="time">
        <span class="ymd">{{today | date:'yyyy-MM-dd'}}</span>
        <span class="w"> {{week}}</span>
      </div>
      <div class="name">
        <span class="ch">{{name}}</span>
        <span class="en"> {{name_PY}}</span>
        <span class="id"> {{job_no}}</span>
      </div>
      <div class="department">
        <span class="number">{{department}}</span>
        <span class="as"> {{department_abb}}</span>
        <span class="role"> 賬戶角色：{{role}}</span>
        <a class="exit" type="button" (click)="(cancel())"> &nbsp;注销</a>
      </div>
    </div>
  </nz-header>
  <div class="table_content">
    <div class="bbs">
      <!-- 返回上一页 -->
      <button class="btn_back" (click)="back()"></button>
      <div class="Text">品質檢驗</div>
    </div>
    <!-- table -->
    <nz-table #headerTable [nzShowPagination]=false nzSize="middle" [nzData]="listOfData" [nzWidthConfig]="widthConfig"
      [nzScroll]="scrollConfig" [nzScroll]="{ y: '700px',x:'1730px'}">
      <thead>
        <tr>
          <th nzLeft="0px" nzWidth="50px" style="min-width: 50px;"></th>
          <th nzLeft="49px" nzWidth="50px" style="min-width: 50px;">操作</th>
          <th nzLeft="99px" nzWidth="50px" style="min-width: 50px;"></th>
          <th style="min-width: 240px;">零件名稱</th>
          <th style="min-width: 250px;">材質</th>
          <th style="min-width: 160px;">圖紙尺寸(X*Y*Z)mm</th>
          <th style="min-width: 120px;">箱號</th>
          <th style="min-width: 120px;">工件數量</th>
          <th style="min-width: 160px;">送檢時間</th>
          <th style="min-width: 200px;">工作時間統計</th>
          <th style="min-width: 220px;">
            <div style="padding: 0 10px">工件檢測結果</div>
            <span style="display: inline-block; width: 50%;">NG數</span>
            <span style="display: inline-block; width: 50%;">OK數</span>
          </th>
          <th style="min-width: 210px;">品檢備註</th>
        </tr>
      </thead>
      <tbody>
        <tr class="tr_hover" *ngFor="let data of listOfData,let bigKey = index">
          <!-- 附件按钮 -->
          <td nzLeft="0px" style="min-width: 50px;">
            <a class="attich" (click)="downLoad(data)" title="文件信息"></a>
          </td>
          <!-- 回退按钮 -->
          <td nzLeft="49px" style="min-width: 50px;">
            <a class="chargeback" (click)="return(data)" title="退回"></a>
          </td>
          <!-- 送出按钮 -->
          <td nzLeft="99px" style="min-width: 50px;">
            <a class="send" (click)="send(data)" title="送出"></a>
          </td>
          <td title="{{data.ljmc}}" style="min-width: 240px;">
            <span
              style="overflow: hidden; white-space: nowrap;text-overflow: ellipsis;text-align: center; max-width: 230px;">
              {{data.ljmc}}
            </span>
          </td>
          <td title="{{data.czhi}}" style="min-width: 250px;">
            <span
              style="text-align: center; text-overflow: -o-ellipsis-lastline;overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;cursor: pointer;max-width: 240px;">
              {{data.czhi}}
            </span>
          </td>
          <td style="min-width: 160px;">{{data.tzcc}}</td>
          <td style="min-width: 120px;">{{ data.box ==='' ? '' : data.box +'號' }}</td>
          <td style="min-width: 120px;">{{data.gjsl}}</td>
          <td style="min-width: 160px;">{{data.songjian_shijian}}</td>
          <!-- 计时器 -->
          <td style="align-items: center; min-width: 200px;" (click)="clickLine(bigKey,data)">
            <div *ngIf="ishowerer[bigKey]">
              <span class="start" (click)="start(data,bigKey)"></span>
              <i>{{sfmtime}}</i>
              <span class="end" (click)="end(data,bigKey)"></span>
            </div>
          </td>
          <!-- 工件檢測結果 -->
          <td style="min-width: 220px;" (click)="addResultNum(data)">
            <span *ngIf="data.gjjcjg"
              style="display: inline-block; width: 50%; color: #FF4848; text-decoration:underline; cursor:pointer;">
              {{data.gjjcjg.split(',')[0]!='undefined'&&data.gjjcjg.split(',')[0]? data.gjjcjg.split(',')[0]:0}}

            </span>
            <span *ngIf="data.gjjcjg"
              style="display: inline-block; width: 50%; color: #21CC97; text-decoration:underline; cursor:pointer;">
              {{data.gjjcjg.split(',')[1]!='undefined'&&data.gjjcjg.split(',')[1]? data.gjjcjg.split(',')[1]:0}}
            </span>
            <span *ngIf="!data.gjjcjg" class="addResultNum"></span>
          </td>
          <!-- 品检备注 -->
          <td
            style="text-decoration:underline;cursor:pointer;max-width: 210px; overflow: hidden; white-space: nowrap;text-overflow: ellipsis;"
            class="fontColor" (click)="addRemark(data)" title={{data.pinjian_bzhu}}>
            <span
              style=" text-overflow: -o-ellipsis-lastline;
            overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;">
              <a class="addRemark" (click)="addRemark(data)"
                *ngIf=" !data.pinjian_bzhu || data.pinjian_bzhu === '' "></a>
              {{data.pinjian_bzhu}}
            </span>
          </td>
        </tr>
      </tbody>
    </nz-table>
    <!-- 添加品检备注 -->
    <nz-modal class="designRemark" [(nzVisible)]="addRemark1" nzTitle="品檢備註" (nzOnCancel)="CancelAddRemark()"
      (nzOnOk)="addRemarkOk()" [nzOkLoading]="isOkLoadingRemark" style="text-align:center"
      [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
      [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',textAlign:'center',lineHeight:'20px'}">
      <div>
        <textarea nz-input [(ngModel)]="designRemark" [nzAutosize]="{ minRows: 2, maxRows: 6 }"
          class="deRemark"></textarea>
        <div style="margin:24px 0;"></div>
      </div>
    </nz-modal>
  </div>

  <!-- 工件檢測結果 -->
  <nz-modal class="add" [(nzVisible)]="checkResult" nzTitle="工件檢測結果" (nzOnCancel)="CancelAddResult()"
    (nzOnOk)="addCheckResult()" [nzOkLoading]="isLoadingCheckResult" style="text-align:center"
    [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
    [nzBodyStyle]="{height:'230px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',textAlign:'center',lineHeight:'20px'}">
    <span>NG: </span> &nbsp;
    <input type="number" [(ngModel)]="NGnum" name="value1" class="NGnum">
    <div style="margin:10%"></div>
    <span>OK: </span> &nbsp;
    <input type="number" [(ngModel)]="OKnum" name="value2" class="OKnum">
  </nz-modal>

  <!-- 上传文件 -->
  <nz-modal [(nzVisible)]="fileInfom" nzTitle="文件信息" (nzOnCancel)="CancelShow()" (nzOnOk)="ShowOK()"
    [nzOkLoading]="isOkLoadingfileInfom" style="text-align:center" nzWidth='1000px'
    [nzBodyStyle]="{height:'600px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'18px',textAlign:'center',lineHeight:'20px'}">
    <!-- 加载中 -->
    <nz-spin [nzSize]="'large'" *ngIf="isLoading"
      style="position: absolute;width: 100vw;height: 100vh;margin-left: -25.5vw;margin-top: -16vh;">
    </nz-spin>
    <div style="text-align:left;border-bottom: 1px solid rgba(36,54,58,1);background: #30494d;">
      <!-- 选择文件 -->
      <div style="width:100% !important;height:1px;background: rgba(36,54,58,1);"></div>
      <input type="file" nv-file-select uploader="uploader"
        style="color:#ffffff; position: absolute;margin-left: 50px; ;margin-top: 16px;" value="点击上传文件" multiple
        (change)="openFile($event)">
      <a class="upload" (click)="Upload()"></a>
    </div>
    <!-- 文件信息 -->
    <div style="text-align:left;line-height: 45px;">
      <nz-table class="tb_file" #rowSelectionTable [nzShowPagination]="false" nzShowSizeChanger [nzData]="fileList"
        style="height: 540px;overflow: auto;">
        <thead>
          <tr style="height:20px;">
            <th style="min-width:250px;text-align:center">文件名稱</th>
            <th style="min-width:250px;text-align:center">上傳時間</th>
            <th style="min-width:50px;text-align:center"></th>
          </tr>
        </thead>
        <tbody class="uploadTable">
          <tr *ngFor="let data of fileList" class="list_hover" style="text-align: center !important;">
            <td style="min-width:250px;text-align:center">
              <!-- 下载 -->
              <a [href]="link" [download]="data.file_name" (click)="downLoadFile(data)">
                {{data.file_name}}
              </a>
              <!-- <span (click)="downLoadFile(data)"> {{data.file_name}}</span> -->
            </td>
            <td>{{data.upload_time}}</td>
            <td style="text-align: center;">
              <a class="delFile" (click)="showDelFile(data)"></a>
            </td>
          </tr>
        </tbody>
      </nz-table>
    </div>
  </nz-modal>

  <!-- 删除文件信息 -->
  <nz-modal [(nzVisible)]="isFileVisible" nzTitle="刪除" (nzOnCancel)="handleFileCancel()" (nzOnOk)="delFileOk()"
    [nzOkLoading]="isFileOkLoading" [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
    [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',fontWight:'300',textAlign:'center',lineHeight:'200px'}">
    <p>確認刪除這個文件信息嗎？</p>
  </nz-modal>

  <!-- 退回 -->
  <nz-modal class="remark" [(nzVisible)]="addOtherRemark" nzTitle="退回" (nzOnCancel)="CancelRemark()"
    (nzOnOk)="RemarkOk()" [nzOkLoading]="isOkLoadingOthRemark" style="text-align:center"
    [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
    [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',textAlign:'center',lineHeight:'20px'}">
    <div style="margin-top:0px">
      <textarea nz-input [(ngModel)]="RemarkValue" [nzAutosize]="{ minRows: 2, maxRows: 8 }"
        class="deRemark"></textarea>
    </div>
  </nz-modal>

  <!-- 送出 -->
  <nz-modal [(nzVisible)]="isSendVisible" nzTitle="送出" (nzOnCancel)="handleSendCancel()" (nzOnOk)="sendOk()"
    [nzOkLoading]="isSendOkLoading" [nzMaskStyle]="{backgroundColor:'rbga(48,73,77,.05)'}"
    [nzBodyStyle]="{height:'200px',background:'rgba(31,46,49,1)',color:'#ffffff',fontSize:'20px',fontWight:'300',textAlign:'center',lineHeight:'60px'}">
    <div>
      <nz-radio-group [(ngModel)]="sendChoose" (ngModelChange)="selectCNC(sendChoose)">
        <label nz-radio nzValue="OK" style="color:#ffffff">已品檢</label>
        <label nz-radio nzValue="NG" style="color:#ffffff">已品檢/NG</label>
      </nz-radio-group>
      <p>確認送出這個工件嗎？</p>
    </div>
  </nz-modal>

</nz-layout>